import React from 'react'
import styles from '@/assets/css/detail.module.css';
import { TMap } from '@map-component/react-tmap';


const RoomInfo = () => {
    let navigate = React.Router.useNavigate();
    let [comment, SetComment] = React.useState([
        {
            id: '1',
            avatar:
                'https://images.unsplash.com/photo-1548532928-b34e3be62fc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
            name: 'Novalee',
            description: 'Deserunt dolor ea eaque eos',
            rate: 5,
        },
        {
            id: '2',
            avatar:
                'https://images.unsplash.com/photo-1493666438817-866a91353ca9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=b616b2c5b373a80ffc9636ba24f7a4a9',
            name: 'Sara',
            description: 'Animi eius expedita, explicabo',
            rate: 3,
        },
        {
            id: '3',
            avatar:
                'https://images.unsplash.com/photo-1542624937-8d1e9f53c1b9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
            name: 'Marco',
            description: 'Ab animi cumque eveniet ex harum nam odio omnis',
            rate: 3,
        },
        {
            id: '4',
            avatar:
                'https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
            name: 'Edith',
            description: 'Commodi earum exercitationem id numquam vitaeCommodi earum exercitationem id numquam vitaeCommodi earum exercitationem id numquam vitae',
            rate: 5,
        },
    ])
    
    const ConfirmReserve = async () => 
    {
        navigate('/room/confirm')
    }
    return (
        <>
            <React.UI.Image src={require('@/assets/images/coupon.png')} height={213} fit='cover' />

            <div className={styles.detail_top}>
                <div id="intro" className={styles.intro}>
                    <div className={styles.title}>暑假特价房</div>
                    <div className={styles.betwee}>
                        <div className={styles.left}>
                            <span>WIFI</span>
                            <span>吹风机</span>
                            <span>空调</span>
                            <span>有浴缸</span>
                        </div>
                    </div>
                    <div className={styles.title}>简介内容</div>
                </div>
                {/* 预定需知 */}
                <div className={styles.notesin}>
                    <div className={styles.title}>预订须知</div>
                    <div className={styles.item}>
                        <span className={styles.tips}>预订房型：</span>
                        <span>新房特惠</span>
                    </div>
                    <div className={styles.item}>
                        <span className={styles.tips}>入离时间：</span>
                        <span>当天 12:00 后入住，次日 12:00 前退房</span>
                    </div>
                    <div className={styles.item}>
                        <span className={styles.tips}>剩余房间数量：</span>
                        <span>10</span>
                    </div>
                </div>

                {/* 地图 */}
                <div className={styles.notesin}>
                    <TMap
                        mapKey="TOZBZ-OU2CX-JJP4Z-7FCBV-CDDJ2-AHFQZ"
                        center={{ lat: 39.984104, lng: 116.307503 }}
                        version='1.exp'
                    />
                </div>

                {/* 评价 */}
                <div id="comment" className={styles.comment}>
                    <div className={styles.title}>评价</div>
                    <React.UI.List style={{ '--border-top': '0', '--border-bottom': '0' }}>
                        {comment.map(item => (
                            <div className={styles.rate_list_item} key={item.id}>
                                <div className={styles.item_content}>
                                    <div className={styles.content_prefix}>
                                        <div className={styles.ratelist}>
                                            <div className={styles.image}>
                                                <img src={require('@/assets/images/avatar.png')} alt="" />
                                            </div>
                                            <p className={styles.nickname}>{item.name}</p>
                                        </div>
                                    </div>
                                    <div className={styles.content_main}>
                                        <div className={styles.rate}>
                                            <React.UI.Rate readOnly value={item.rate} style={{ '--star-size': '18px' }} />
                                        </div>
                                        <div className={styles.item_description}>
                                            <p>{item.description}</p>
                                            <p className={styles.item_time}>2024-03-14 10:53:56</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </React.UI.List>

                    <React.UI.AutoCenter>
                        <React.Router.Link to={'/room/comment'}>查看更多评价</React.Router.Link>
                    </React.UI.AutoCenter>
                </div>
            </div>

            <div className={styles.foot_bar}>
                <div className={styles.price}>
                    ￥60
                </div>
                <React.UI.Button onClick={ConfirmReserve} color='primary' shape='rounded'>立即预定</React.UI.Button>
            </div>
        </>
    )
}

export default RoomInfo;